<template>
    <!-- url远程地址跳转 -->
    <a v-if="isLink" :href="to">
        <!-- appLink插槽中接收的内容 -->
        <slot></slot>
    </a>
    <!-- 路由跳转 -->
    <!-- <router-link v-else :to="to" :replace="replace"></router-link> -->
    <router-link v-else :to="to" :replace="replace" custom  v-slot="{href,navigate,isActive}">
        <a @click="navigate" :class="isActive?activeClass:inactiveClass">
             <!-- appLink插槽中接收的内容 -->
            <slot></slot>
        </a>
    </router-link>
</template>

<script setup>
    import {RouterLink,useLink} from "vue-router"
    import { computed } from "vue";
    console.log("RouterLink.props",RouterLink.props);


    // var obj= {a:1,b:2,c:3}

    // var data = {
    //     ...obj,
    //     a:1,
    //     b:2,
    //     c:3
    // }

     // 定义app-link组件接收的属性 => 此属性中有部分要传入到router-link()
    // defineProps(["a","b"])
    var props = defineProps({
        // to:String,
        // replace:Boolean,
        // activeClass:String,
        // exactActiveClass:String,
        ...RouterLink.props,  // app-link组件接收的属性 和 router-link保持一致
        inactiveClass:String,  // 新增inactiveClass  => 不活跃状态的类名
    })
    console.log(1111,props);
    
    var {to,replace,activeClass,inactiveClass} = props;  // this.$props
    console.log(2,to,replace,activeClass,inactiveClass);
    
    var isLink = computed(()=>{
        return  typeof to == "string" && to.startsWith("http");
    })




</script>

<style  scoped>
    a{
        color: inherit;
        text-decoration: none;
    }
</style>